function circleProcess(option, fn){
    // canvas进度条
    var rootOption = Object.assign({}, {
        progress: 50,
        radius: 100,
        showText: false,
        fontSize: 20,
        color: '#639ef4',
        // 圆环
        cirleLineWidth: 5,
        circleColor: '#639ef4',
        circleStart: -0.5 * Math.PI, // 暂时定在这里不要改
        circleEnd: 1.5 * Math.PI,
        // 圆弧
        sectorLineWidth: 5,
        showStartSmall: true,
        showEndSmall: true,
        showLinear: true,
        sectorStart: -0.5 * Math.PI,  // 暂时定在这里不要改
        sectorColor: '#FC863F',
        // 圆弧头的样式
        lineCap: 'round',
        // 渐变
        linearStart: '#FC863F',
        linearEnd: '#f00',
        // 圆头
        smallStartRadius: 10,
        smallEndRadius: 10,
    }, option)
    if (!rootOption.target) {
        return
    }
    var canvas = rootOption.target
    var ctx = canvas.getContext("2d")
    var percent = rootOption.progress //最终百分比
    var circleX = rootOption.x || canvas.width / 2  //中心x坐标
    var circleY = rootOption.y || canvas.height / 2  //中心y坐标
    var radius = rootOption.radius //圆环半径
    var cirleLineWidth = rootOption.cirleLineWidth  //圆形线条的宽度
    var fontSize = rootOption.fontSize //字体大小
    var circleColor = rootOption.circleColor // 圆环的颜色
        //两端圆点
    function smallcircle1(cx, cy, r) {
        ctx.beginPath()
        ctx.lineWidth = 1
        ctx.fillStyle = '#06a8f3'
        ctx.arc(cx, cy, r,0,Math.PI*2)
        ctx.fill()
    }
    // 暂定只支持画圆圈儿中间白底
    function smallcircle2(cx, cy, r) {
        ctx.beginPath()
        ctx.lineWidth = Math.round(rootOption.sectorLineWidth)
        ctx.strokeStyle = rootOption.sectorColor
        ctx.fillStyle = '#fff'
        ctx.arc(cx, cy, r,0,Math.PI*2)
        ctx.fill()
        ctx.stroke()
    }
    // 画圆
    function circle(cx, cy, r) {
        ctx.beginPath()
        ctx.lineWidth = cirleLineWidth
        ctx.strokeStyle = circleColor
        ctx.arc(cx, cy, r, rootOption.circleStart, rootOption.circleEnd)
        ctx.stroke()
    }
        //画弧线
    function sector(cx, cy, r, startAngle, process) {
        ctx.beginPath()
        var lineWidth = rootOption.sectorLineWidth
        ctx.lineWidth = lineWidth
        var linGrad
        // 渐变色 - 可自定义
        if (rootOption.showLinear) {
            linGrad = ctx.createLinearGradient(circleX-radius-lineWidth, circleY, circleX + radius + lineWidth, circleY)
            linGrad.addColorStop(0.0, rootOption.linearStart)
            linGrad.addColorStop(1.0, rootOption.linearEnd)            
        }
        ctx.strokeStyle = rootOption.sectorColor
        //圆弧两端的样式
        ctx.lineCap = rootOption.lineCap
        // 圆弧
        ctx.arc(cx, cy, r, startAngle, startAngle + 2 * Math.PI * process / 100, false) // 顺时针
        ctx.stroke()
    }
    //刷新
    var process = 0.0 // 进度
    // return new Promise((resolve) => {
        
    // })
    var circleLoading = setInterval(function () {
        fn && fn(process >= percent ? percent : Math.floor(process))
        // console.log(process , percent)
        if (process >= percent || process > 100 || !percent) {
            clearInterval(circleLoading)
        }
        // 清除canvas内容
        ctx.clearRect(0, 0, circleX * 2, circleY * 2)
        // 中间的字
        if (rootOption.showText) {
            ctx.font = fontSize + 'px April'
            ctx.textAlign = 'center'
            ctx.textBaseline = 'middle'
            ctx.fillStyle = rootOption.color
            ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY)
        }
        // 圆形
        circle(circleX, circleY, radius)
        // 圆弧
        sector(circleX, circleY, radius, rootOption.sectorStart, process)
        // 两端圆点
        if (rootOption.showStartSmall) {
            var smallStartX = circleX // + Math.cos(2 * Math.PI/360 * 120) * 100
            var smallStartY = circleY - rootOption.radius // + Math.sin(2 * Math.PI / 360 * 120) * 100
            smallcircle1(smallStartX,smallStartY, rootOption.smallStartRadius)
        }
        if (rootOption.showEndSmall) {
            var angleProcess = 2 * Math.PI * process / 100
            var smallEndX = circleX + Math.sin(angleProcess) * rootOption.radius
            var smallEndY = circleY - Math.cos(angleProcess) * rootOption.radius
            smallcircle2(smallEndX, smallEndY, rootOption.smallEndRadius)
        }
        // 控制结束时动画的速度
        if (process / percent > 0.90) {
            process += 0.30
        } else if (process / percent > 0.80) {
            process += 0.55
        } else if (process / percent > 0.70) {
            process += 0.75
        } else {
            process += 1.0
        }
    }, 20)
}

export {circleProcess}